<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>充值缴费</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css" />
<style>
	.mui-content-padded{
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0;
	}
	.mui-btn-block{
		margin-bottom: 0;
		padding: 8px 0;
	}
	.packageList{
		padding-top: 10px;
	}
	.packageList>.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body span:first-child{
		font-size: 20px;
	}
	.packageList>.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body span:last-child{
		font-size: 13px;
	}
	.mui-input-row .mui-input-clear ~ .mui-icon-clear{
		right: 25px;
		top: 12px;
	}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">充值缴费</h1>
</header>	
<div class="mui-content">
	<ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <div class="mui-media-body">
			    <div class="mui-input-row">
			        <input type="text" maxlength="11" class="mui-input-clear recharge-num" oninput="OnInput (event)"  id="phone" placeholder="请输入手机号">
			        <!--可以在此处的i加上点击打开系统通讯录的功能-->
			        <i class="mui-icon mui-icon-contact recharge-choose" id="choose"></i>
			        <!--简单号码检测-->
			        <span class="recharge-tips"></span>
			    </div>
            </div>
        </li>
   </ul>
	<div class="packageList">
		<span class="recharge-txt">充话费：</span>
		<ul class="mui-table-view mui-grid-view mui-grid-9" id="cate">
	            <li id="promptBtn" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">	
	            	<a href="javascript:changeCate(0);"  class="mui-media-body">
	            		<span>10元</span>
	            		<span>售价:10元</span>
	            	</a>
	            </li>
	             <li id="promptBtn" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">	
	            	<a href="javascript:changeCate(1);"  class="mui-media-body">
	            		<span>20元</span>
	            		<span>售价:20元</span>
	            	</a>
	            </li>
	            <li id="promptBtn" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">	
	            	<a href="javascript:changeCate(2);"  class="mui-media-body">
	            		<span>30元</span>
	            		<span>售价:30元</span>
	            	</a>
	            </li>
	            <li id="promptBtn" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">	
	            	<a href="javascript:changeCate(3);"  class="mui-media-body">
	            		<span>50元</span>
	            		<span>售价:49.85元</span>
	            	</a>
	            </li>
	            <li id="promptBtn" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">	
	            	<a href="javascript:changeCate(4);"  class="mui-media-body">
	            		<span>100元</span>
	            		<span>售价:98.00元</span>
	            	</a>
	            </li>
	     </ul>
	</div>
</div>
<div class="mui-content-padded">
	<button type="button" class="mui-btn mui-btn-block mui-btn-primary">立即充值</button>
</div>

<script src="js/h.min.js"></script>
<script type="text/javascript">
	mui.init();
	function changeCate(cateId){
		h('.packageList').find('li').removeClass('active').eq(cateId).addClass('active');
	} 
	//手机号简单检测判断
	function OnInput (event) {
    	if(event.target.value.length==11){
	    	var phone = document.getElementById('phone').value;
		    if(!(/^1[34578]\d{9}$/.test(phone))){ 
		    	h('.recharge-tips').show().html('手机号码有误，请重填')
		        return false; 
		    }
		    else{
	    		h('.recharge-tips').show().html('余额:109.12元')
	    	}
	    }
   }

</script>
</body>

</html>